<!--
 * @Author: liuhf35610 liuhf35610@hundsun.com
 * @Date: 2022-07-04 18:28:24
 * @LastEditors: liuhf35610 liuhf35610@hundsun.com
 * @LastEditTime: 2022-07-08 01:32:38
 * @FilePath: \code\day02-manage-platform\client\src\layouts\default.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="layout" v-if="$store.getters['operator/isLoggedIn']">
      <h-row>
        <myHeader class="animate__animated animate__fadeInDownBig" />
      </h-row>
      <h-row name="flex">
        <h-col span="4">
          <side-bar class="animate__animated animate__fadeInLeftBig" />
        </h-col>
        <h-col span="20">
          <h-row>
            <div class="breadcrumb animate__animated animate__fadeInRightBig">
              <h-breadcrumb separator=">">
                <h-breadcrumb-item href="#">
                  <h-icon name="homepage"></h-icon>
                  理财销售系统
                </h-breadcrumb-item>
                <h-breadcrumb-item href="#">
                  <h-icon name="mail"></h-icon>
                  {{ routeNames[$route.fullPath.split("/")[1]] }}
                </h-breadcrumb-item>
                <h-breadcrumb-item>
                  <h-icon name="manage"></h-icon> {{ routeNames[$route.name] }}
                </h-breadcrumb-item>
              </h-breadcrumb>
            </div>
          </h-row>
          <h-row>
            <div class="layout-content animate__animated animate__fadeInUpBig">
              <div class="layout-content-main">
                <router-view class="animate__animated animate__fadeInUp" />
              </div>

              <chat />
            </div>
          </h-row>
          <h-row>
            <div class="layout-footer layout-copy">
              &copy;2024 HUNDSUN 版权所有
            </div>
          </h-row>
        </h-col>
      </h-row>
    </div>
    <div>
      <login v-if="!$store.getters['operator/isLoggedIn']" />
    </div>
  </div>
</template>

<script>
import VueDraggableResizable from "vue-draggable-resizable";
import "vue-draggable-resizable/dist/VueDraggableResizable.css";
import { Slide,Push } from "vue-burger-menu";
export default {
  //引入组件
  components: {
    login: () => import("@/components/login.vue"),
    sideBar: () => import("@/components/sideBar.vue"),
    myHeader: () => import("@/components/myHeader.vue"),
    chat: () => import("@/components/chat.vue"),
    VueDraggableResizable,
    Slide,Push
  },
  data() {
    return {
      isDragging: false,
      showDialog: false,
      message: "",
      routeNames: {
        trade: "交易管理",
        redeem: "赎回",
        user: "用户管理",
        product: "产品管理",
        order: "业务查询",
        bank: "充值",
        liquidation: "清算",
        "bank-recharge": "虚拟充值",
        "liquidation-liquidation": "清算",
        "order-order": "订单",
        "product-info": "产品信息",
        "trade-redeem": "赎回",
        "trade-subscribe": "申购",
        "user-info": "用户信息",
        "user-register": "用户注册",
      },
      position: {
        x: window.innerWidth / 2 - 100,
        y: window.innerHeight / 2 - 100,
      },
    };
  },
  mounted() {
    window.addEventListener("resize", this.updatePosition);
    console.log("router", this.$route);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updatePosition);
  },
  methods: {
    dragStart() {
      console.log("dragStart");
      this.isDragging = true;
    },
    dragStop() {
      console.log("dragStop");
      setTimeout(() => {
        this.isDragging = false;
      }, 100);
    },
    updatePosition() {
      this.position.x = window.innerWidth / 2 + 100;
      this.position.y = window.innerHeight / 2 - 400;
    },
    show() {
      console.log("show1");
      if (!this.isDragging) {
        console.log("show2");
        // 执行点击事件的处理逻辑...。
        console.log("show");
        this.showDialog = true;
      }
    },
    sendMessage() {
      console.log(this.message);
      //TODO 接入文心一言
    },
  },
};
</script>

<style lang="less" scoped>
.h-menu-item-active {
  > a {
    color: #fff;
  }
}

.layout {
  background-color: #f5f5f5;
}

.layout-content {
  margin: 2vh;
  background-color: #fff;
  overflow-y: auto;
  height: 76vh; /* 或者你想要的最大高度 */
  border-radius: 8px;
  box-shadow: 5px 5px 10px #989898, -2px -2px 5px #ffffff;
}

.layout-content-main {
  padding: 24px;
}

.layout-footer {
  background-color: #f5f5f5;
  text-align: center;
  // height: 30px;
}

.breadcrumb {
  padding: 2vh;
  background-color: #ffffff;
  box-shadow: 5px 5px 8px #acacac;
}

router-link {
  width: 100%;
  height: 100%;
}

.logo {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%; /* 使其呈现为圆形 */
  overflow: hidden; /* 确保图片也呈现为圆形 */
}
.logo img {
  width: 100%;
  height: 100%;
}
</style>
